<template>
  <div class="charts">
    <Card>
      <p slot="title">{{ title }}</p>
      <div slot="extra">
        <Icon type="md-refresh" :size="18" style="margin-left: 6px;" @click="refresh" />
      </div>
      <!--通过插槽将cartscard组件与piecharts组件分隔开使用 -->
      <!-- <slot name="charts" v-bind:user="name"></slot> -->
      <slot name="charts"></slot>
    </Card>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { Tools } from "@/model/tools.ts";
@Component
export default class ChartsCard extends Tools {
  @Prop()
  private title!: string;
  //利用slot插槽
  private name: any = { name: "pzy", age: 20 };
  private refresh() {
    this.$emit("on-refresh");
  }
}
</script>
